 $(function(){
	 	var screen_width = screen.availWidth;
	 	$("#imgContent").width(screen_width*5);
		$("#imgScroll").width(screen_width);
	 	$(".img_cl").width(screen_width);
        //缓存存放图片的区域的对象
        var $imgContent=$("#imgContent");
             //得到图片显示区的宽度
             imgScrollWidth=$("#imgScroll").width();
             //缓存小圆点和它的数组长度
             $arcLi=$("#arcList li");
             arcLiLen=$arcLi.length;
             //用来存放需要关闭的setInterval的值
             closeSet=null;
             //用于确定该显示第几个小圆点的参数
             arcNum=0;
        //默认将第一个小圆点点亮
        $arcLi.get(arcNum).style.backgroundColor="black"; 
        /*自动滚动图片的方法,很简单,移走第一张,下一张自然的就显示出来了,
        然后把第一张放到末尾去,并把它的marginLeft归零,当播放到最后一张就可以无缝衔接第一张了
        */
        function imgScroll(){
            //每次将第一个div向左移出内容区，下一个div自动显示在内容区，并将第一个div附加到父元素的最后
            $imgContent.children("div:first").animate({marginLeft:"-"+imgScrollWidth+""},500,"swing",function(){
                $(this).css({marginLeft:"0"}).appendTo($imgContent);
                //将当前小圆点熄灭
                $arcLi.get(arcNum).style.backgroundColor="rgba(0,0,0,.5)";
                  //判断小圆点是否为最后一个,如果是,则将标记小圆点的参数归零,重新从第一个开始
               if(arcNum==arcLiLen-1){
                    arcNum=0;
               }else{
                    arcNum++;
               }
                //将下一个小圆点点亮
                $arcLi.get(arcNum).style.backgroundColor="black";
                
            });
        }
        
        closeSet=setInterval(imgScroll,5000);
 
		//鼠标放在图片上停止滚动,鼠标离开图片继续滚动
        $("#imgScroll").hover(
                function(){
                    clearInterval(closeSet);
                    $("#imgScroll button").show(300,"swing");
                },
                function(){
                    closeSet=setInterval(imgScroll,5000);
                    $("#imgScroll button").hide(300,"swing");
                });
      
        //手动点击下一张时只需手动调用imgScroll就行
        $("#next").on("click",function(){
            /*如果连续点击下一张的话,会引发不和谐的东西,所以我们判断第一张图片的marginLeft值,如果正在执行动画,它的marginLeft是不会为0的
            所以这样判断就确保了执行完了一个动画才会调用下一张的方法
            */
            var marginLeft=parseInt($imgContent.children("div:first").css("marginLeft"));
            if(marginLeft==0){
                imgScroll();
            }
        });
        //手动点击上一张图片的方法
        $("#prev").on("click",function(){
            //判断同上
            var marginLeft=parseInt($imgContent.children("div:first").css("marginLeft"));
            if(marginLeft==0){
                //上一张图片就是刚才移动到末尾的那张,所以我把末尾的那张添加到第一张的前面
                $imgContent.children("div:first").before($imgContent.children("div:last"));
                /*注意这里的第一张是刚才末尾的那张图片了,设置marginLeft为-imgScrollWidth是将它放在内容区的左边,营造从左滑向右的效果
                 这里的图片滚动全部操作第一张图片,这张图片向左离开内容区时,就将位置留给下一张显示,当它从左到右回来是,就把下一张挤出内容区
                 */
                $imgContent.children("div:first").css({"marginLeft":"-"+imgScrollWidth+"px"}).animate({marginLeft:"0"},500,"swing",function(){
                    //将当前小圆点熄灭
                    $arcLi.get(arcNum).style.backgroundColor="rgba(0,0,0,.5)";
                    if(arcNum==0){
                        arcNum=arcLiLen-1;
                    }else{
                        arcNum--;
                    }
                    //将上一个小圆点点亮
                    $arcLi.get(arcNum).style.backgroundColor="black";
                    //判断小圆点是否为第一个,如果是,则将标记圆点的参数设为最大,即最后一个小圆点
                });
            }
        });
     });